<template>
  <el-select
    :value="value"
    :loading="loading"
    :disabled="disabled"
    filterable
    remote
    clearable
    :remote-method="remoteMethod"
    @change="onChange"
    style="width: 100%"
    placeholder="请输入任务名称">
    <el-option
      v-for="item in options"
      :key="item.id"
      :value="item.id"
      :label="item.name"></el-option>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-select>
</template>

<script>

export default {
  name: "task-select",
  props: ["project_id", "value", "disabled", "customOptions"],
  data() {
    return {
      loading: false,
      options: this.customOptions || [],
    }
  },
  watch: {
    project_id() {
      this.remoteMethod()
    }
  },
  created() {
    this.remoteMethod()
  },
  methods: {
    remoteMethod() {
      this.$http.get("/tasks", {params: {project_id: this.project_id}}).then(({data}) => {
        this.options = data.data
      }).catch(err => {
        console.log(err)
      })
    },
    onChange(val) {
      this.$emit('input', val)
    }
  }
}
</script>

<style scoped>

</style>
